<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>

	<style type="text/css">
.ui-layout-north {
	z-index: 20 !important;
	overflow: visible;
}

.ui-layout-north .ui-layout-unit-content {
	overflow: visible;
}

.ui-widget {
	font-size: 9px !important;
}

.centro {
	top: 50%
}

.tabela {
	width: 700px;
}

.size {
	width: 800px;
	position: absolute;
	left: 15%;
	top: 10%;
}
</style>

	<script type="text/javascript">
		PrimeFaces.locales['pt'] = {
			closeText : 'Fechar',
			prevText : 'Anterior',
			nextText : 'Próximo',
			currentText : 'Começo',
			monthNames : [ 'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio',
					'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro',
					'Novembro', 'Dezembro' ],
			monthNamesShort : [ 'Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
					'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez' ],
			dayNames : [ 'Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta',
					'Sexta', 'Sábado' ],
			dayNamesShort : [ 'Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb' ],
			dayNamesMin : [ 'D', 'S', 'T', 'Q', 'Q', 'S', 'S' ],
			weekHeader : 'Semana',
			firstDay : 0,
			isRTL : false,
			showMonthAfterYear : false,
			yearSuffix : '',
			timeOnlyTitle : 'Só Horas',
			timeText : 'Tempo',
			hourText : 'Hora',
			minuteText : 'Minuto',
			secondText : 'Segundo',
			ampm : false,
			month : 'Mês',
			week : 'Semana',
			day : 'Dia',
			allDayText : 'Todo o Dia'
		};
	</script>

	<title>Suporte T.I</title>
</h:head>

<h:body>

	<ui:decorate template="/templateBase.xhtml">
		<ui:define name="center">
			<p:growl id="growl" life="3000" autoUpdate="false" />
			<h:form id="formSuporte" acceptcharset="ISO-8859-1" lang="pt">
				<br />
				<br />
				<br />
				<p:panel styleClass="size"
					header="Suporte - Tecnologia da Informação"
					footer="Integração - Portal de Serviços e Comunicação"
					id="panelSuporte">
					<br />
					<p:tabView>

						<p:tab title="Meus Atendimentos">
							<p:dataTable var="a"
								value="#{ordemDeServicoBacking.listaAtendimentosFuncionario}"
								emptyMessage="Não consta nenhum atendimento para o usuário logado!">

								<p:column headerText="ID">
									<h:outputText value="#{a.ordemServico.id}" />
								</p:column>

								<p:column headerText="Data">
									<h:outputText value="#{a.ordemServico.dataEntrada}">
										<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
									</h:outputText>
								</p:column>

								<p:column headerText="Funcionário">
									<h:outputText value="#{a.solicitante.nome}" />
								</p:column>

								<p:column headerText="Assunto">
									<div align="center">
										<h:outputText value="#{a.ordemServico.assunto}" />
									</div>
								</p:column>

								<p:column headerText="Categoria">
									<div align="center">
										<h:outputText value="#{a.ordemServico.categoria.descricao}" />
									</div>
								</p:column>

								<p:column headerText="Motivo">
									<div align="center">
										<h:outputText value="#{a.ordemServico.motivo.descricao}" />
									</div>
								</p:column>

								<p:column headerText="Status">
									<div align="center">
										<h:outputText value="#{a.ordemServico.status}" />
									</div>
								</p:column>

								<p:column headerText="Detalhes">
									<div align="center">
										<p:commandButton icon="ui-icon-search"
											update=":formAtendimento"
											actionListener="#{ordemDeServicoBacking.selecionaOrdemServico(a)}"
											onclick="dlgAtendimento.show()" />
									</div>
								</p:column>
							</p:dataTable>
						</p:tab>

						<p:tab title="Aguardando Antendimento">
							<p:dataTable value="#{ordemDeServicoBacking.listaOrdemAberta}"
								var="a"
								emptyMessage="Não consta nenhum chamado na base de dados!">

								<p:column headerText="ID">
									<h:outputText value="#{a.ordemServico.id}" />
								</p:column>

								<p:column headerText="Data">
									<h:outputText value="#{a.ordemServico.dataEntrada}">
										<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
									</h:outputText>
								</p:column>

								<p:column headerText="Funcionário">
									<h:outputText value="#{a.solicitante.nome}" />
								</p:column>

								<p:column headerText="Assunto">
									<div align="center">
										<h:outputText value="#{a.ordemServico.assunto}" />
									</div>
								</p:column>

								<p:column headerText="Categoria">
									<div align="center">
										<h:outputText value="#{a.ordemServico.categoria.descricao}" />
									</div>
								</p:column>

								<p:column headerText="Motivo">
									<div align="center">
										<h:outputText value="#{a.ordemServico.motivo.descricao}" />
									</div>
								</p:column>

								<p:column headerText="Status">
									<div align="center">
										<h:outputText value="#{a.ordemServico.status}" />
									</div>
								</p:column>

								<p:column headerText="Detalhes">
									<div align="center">
										<p:commandButton icon="ui-icon-search"
											actionListener="#{ordemDeServicoBacking.selecionaOrdemServico(a)}"
											onclick="dlgAtender.show()" update=":formAtender" />
									</div>
								</p:column>
							</p:dataTable>
						</p:tab>

						<p:tab title="Chamados Encerrados">
							<p:dataTable var="a"
								value="#{ordemDeServicoBacking.listaOrdemEncerrada}"
								emptyMessage="Não consta nenhum atendimento para o usuário logado!">

								<p:column headerText="ID">
									<h:outputText value="#{a.ordemServico.id}" />
								</p:column>

								<p:column headerText="Data">
									<h:outputText value="#{a.ordemServico.dataEntrada}">
										<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
									</h:outputText>
								</p:column>

								<p:column headerText="Funcionário">
									<h:outputText value="#{a.solicitante.nome}" />
								</p:column>

								<p:column headerText="Assunto">
									<div align="center">
										<h:outputText value="#{a.ordemServico.assunto}" />
									</div>
								</p:column>

								<p:column headerText="Categoria">
									<div align="center">
										<h:outputText value="#{a.ordemServico.categoria.descricao}" />
									</div>
								</p:column>

								<p:column headerText="Motivo">
									<div align="center">
										<h:outputText value="#{a.ordemServico.motivo.descricao}" />
									</div>
								</p:column>

								<p:column headerText="Status">
									<div align="center">
										<h:outputText value="#{a.ordemServico.status}" />
									</div>
								</p:column>

								<p:column headerText="Detalhes">
									<div align="center">
										<p:commandButton icon="ui-icon-search"
											update=":formAtendimento"
											actionListener="#{ordemDeServicoBacking.selecionaOrdemServico(a)}"
											onclick="dlgAtendimento.show()" />
									</div>
								</p:column>
							</p:dataTable>
						</p:tab>


					</p:tabView>
				</p:panel>
			</h:form>

			<p:dialog widgetVar="dlgAtender" showEffect="clip" hideEffect="clip"
				header="Atender" width="600" height="400">
				<h:form id="formAtender">
					<p:tabView id="tabView">

						<p:tab title="Detalhes" id="tabChamado">
							<br />
							<h:panelGrid>

								<h:outputText value="Categoria" />
								<p:inputText size="50" readonly="true"
									value="#{ordemDeServicoBacking.ordemSelecionada.ordemServico.categoria.descricao}" />

								<h:outputText value="Motivo" />
								<p:inputText size="50" readonly="true"
									value="#{ordemDeServicoBacking.ordemSelecionada.ordemServico.motivo.descricao}" />

								<h:outputText value="Equipamento" />
								<p:inputText size="50" readonly="true"
									value="#{ordemDeServicoBacking.ordemSelecionada.ordemServico.equipamento.descricao}" />

								<h:outputText value="Assunto:" />
								<p:inputText size="70" readonly="true"
									value="#{ordemDeServicoBacking.ordemSelecionada.ordemServico.assunto}" />

								<h:outputText value="Justificativa" />
								<p:inputTextarea cols="100" rows="5" autoResize="true"
									value="#{ordemDeServicoBacking.ordemSelecionada.ordemServico.assunto}" />

							</h:panelGrid>
							<br />
							<p:separator />
							<br />
							<div align="center">
								<h:panelGrid columns="2">
									<p:commandButton value="Atender" ajax="false"
										update=":formSuporte"
										actionListener="#{ordemDeServicoBacking.atenderOrdemServico}" />
									<p:commandButton value="Cancelar" onclick="dlgAtender.hide()" />
								</h:panelGrid>
							</div>
						</p:tab>

					</p:tabView>
				</h:form>
			</p:dialog>

			<p:dialog widgetVar="dlgAtendimento" showEffect="clip"
				hideEffect="clip" header="Atendimento" width="650" height="400">
				<h:form id="formAtendimento">
					<p:growl id="msg_detalhe" life="4000" />
					<p:tabView id="tabView">

						<p:tab title="Detalhes" id="tabChamado">
							<br />
							<h:panelGrid>

								<h:outputText value="Categoria" />
								<p:inputText size="50" readonly="true"
									value="#{ordemDeServicoBacking.ordemSelecionada.ordemServico.categoria.descricao}" />

								<h:outputText value="Motivo" />
								<p:inputText size="50" readonly="true"
									value="#{ordemDeServicoBacking.ordemSelecionada.ordemServico.motivo.descricao}" />

								<h:outputText value="Equipamento" />
								<p:inputText size="50" readonly="true"
									value="#{ordemDeServicoBacking.ordemSelecionada.ordemServico.equipamento.descricao}" />

								<h:outputText value="Assunto:" />
								<p:inputText size="70" readonly="true"
									value="#{ordemDeServicoBacking.ordemSelecionada.ordemServico.assunto}" />

								<h:outputText value="Justificativa" />
								<p:inputTextarea cols="100" rows="5" autoResize="true"
									value="#{ordemDeServicoBacking.ordemSelecionada.ordemServico.justificativa}" />

							</h:panelGrid>
							<br />
							<div align="center">
								<h:panelGrid columns="2">
									<p:commandButton value="Finalizar" ajax="false" process="@this"
										action="#{ordemDeServicoBacking.finalizarAtendimento(ordemDeServicoBacking.ordemSelecionada.id)}" />

									<p:commandButton value="Cancelar" onclick="dlgAtender.hide()" />
								</h:panelGrid>
							</div>
							<br />
							<p:separator />
							<br />
							<h:form prependId="false">
								<p:accordionPanel multiple="true">
									<p:tab title="Comentários">


										<h:outputLabel value="Comentário: " />
										<div align="center">
											<p:inputTextarea autoResize="true" cols="100" rows="4"
												value="#{ordemDeServicoBacking.comentarioOS.comentario}" />
											<br /> <br />
											<p:commandButton
												action="#{ordemDeServicoBacking.inserirComentariosOS(ordemDeServicoBacking.ordemSelecionada.ordemServico.id)}"
												value="Salvar" icon="ui-icon-check"
												update=":formAtendimento" onsuccess="dlgAtendimento.hide()" />
										</div>
										<br />
										<p:separator />
										<br />

										<div align="center">
											<p:panel
												header="#{ordemDeServicoBacking.listaComentarios.size()} - Cometário(s)"
												style="margin-left: 0">
												<p:dataTable
													value="#{ordemDeServicoBacking.listaComentarios}" var="c"
													emptyMessage="Não consta comentários na base de dados">

													<p:column>
														<p:inputTextarea value="#{c.comentario}" readonly="true"
															autoResize="true" style="background-color: yellow"
															cols="93" />
														<div align="right">
															<h:outputLabel value="#{c.funcionario.nome} - " />
															<h:outputLabel value="#{c.dataComentario}">
																<f:convertDateTime
																	pattern="EEEE,dd 'de' MMMM 'de' yyyy - HH:mm:ss"
																	timeZone="GMT-3" locale="pt_BR" />
															</h:outputLabel>
														</div>
														<br />
													</p:column>

												</p:dataTable>
											</p:panel>
										</div>

									</p:tab>
								</p:accordionPanel>
							</h:form>
						</p:tab>

					</p:tabView>
				</h:form>
			</p:dialog>

		</ui:define>
	</ui:decorate>
</h:body>
</html>